<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeTab">
        <el-tab-pane label="电池报警" name="batteryAlarmSetting">
          <el-form :model="batteryAlarmSettingForm" :rules="rules" ref="batteryAlarmSettingForm" label-width="150px"
                   size="mini"
                   label-suffix=":"
                   style="width: 600px;">
            <el-form-item prop="batteryVolumeAlarmValue">
              <span slot="label">
                电池报警电量
              <el-tooltip placement="top">
                  <div slot="content">
                    船只电池电量低于此值将触发报警。
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip>
                ：
              </span>
              <el-input v-model.number="batteryAlarmSettingForm.batteryVolumeAlarmValue" placeholder="5~80"
                        size="small"></el-input>
              <span style="margin-left: 8px">%</span>
            </el-form-item>
            <el-form-item prop="batteryTempAlarmValue">
              <span slot="label">
                电池报警温度
              <el-tooltip placement="top">
                  <div slot="content">
                    船只电池温度高于此值将触发报警。
                  </div>
                  <i class="el-icon-question"></i>
              </el-tooltip>
                ：
              </span>
              <el-input v-model.number="batteryAlarmSettingForm.batteryTempAlarmValue" size="small"></el-input>
              <span style="margin-left: 8px">°c</span>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="submitBatteryAlarmSettingForm('batteryAlarmSettingForm')"
                         style="margin-left: 30px;margin-top: 20px">保存
              </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import {getConfigByKey, updateConfig} from "@/api/system/config"

export default {
  name: "AlarmSetting",
  data() {

    let validateBatteryVolumeAlarmValue = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('电池电量报警值不能为空'));
      }

      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 10 || value > 80) {
            callback(new Error('电池电量报警值取值范围：10~80'));
          } else {
            callback();
          }
        }
      }, 500);
    }

    let validateBatteryTempAlarmValue = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('电池温度报警值不能为空'));
      }

      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 35 || value > 65) {
            callback(new Error('电池温度报警值取值范围：35~65'));
          } else {
            callback();
          }
        }
      }, 500);
    }

    return {
      activeTab: "batteryAlarmSetting",
      batteryVolumeAlarmValueConfigObj: undefined, //船只电池电量报警值配置对象
      batteryTempAlarmValueConfigObj: undefined, //船只电池温度报警值配置对象
      batteryAlarmSettingForm: {
        batteryVolumeAlarmValue: 0, //船只电池电量报警值
        batteryTempAlarmValue: 0, //船只电池温度报警值
        testValue: 12
      },
      // 表单校验
      rules: {
        batteryVolumeAlarmValue: [
          {validator: validateBatteryVolumeAlarmValue, trigger: ["blur", "change"]}
        ],
        batteryTempAlarmValue: [
          {validator: validateBatteryTempAlarmValue, trigger: ["blur", "change"]}
        ],

      }
    }
  },
  mounted() {
    this.getAllBatteryAlarmValue();
  },
  methods: {
    getAllBatteryAlarmValue() {
      this.getBatteryVolumeAlarmValue();
      this.getBatteryTempAlarmValue();
    },
    getBatteryVolumeAlarmValue() {
      getConfigByKey("batteryVolumeAlarmValue").then(res => {
        console.log("getBatteryVolumeAlarmValue res: ", res)
        let data = res.data;
        if (data) {
          this.batteryVolumeAlarmValueConfigObj = data;
          this.batteryAlarmSettingForm.batteryVolumeAlarmValue = Number(data.configValue);
        }
      })
    },
    getBatteryTempAlarmValue() {
      getConfigByKey("batteryTempAlarmValue").then(res => {
        console.log("getBatteryTempAlarmValue res: ", res)
        let data = res.data;
        if (data) {
          this.batteryTempAlarmValueConfigObj = data;
          this.batteryAlarmSettingForm.batteryTempAlarmValue = Number(data.configValue);
        }
      })
    },
    submitBatteryAlarmSettingForm(formName) {
      console.log("submitBatteryAlarmSettingForm this.batteryAlarmSettingForm: ", this.batteryAlarmSettingForm);

      this.$refs[formName].validate(valid => {
        if (!valid) {
          console.log("校验不通过，禁止提交")
          return false;
        } else {
          console.log("校验通过，可以提交")

          //先更新电池电量报警值
          if (this.batteryVolumeAlarmValueConfigObj) {
            this.batteryVolumeAlarmValueConfigObj.configValue = this.batteryAlarmSettingForm.batteryVolumeAlarmValue;
            updateConfig(this.batteryVolumeAlarmValueConfigObj).then(res => {
              if (res.code === 200) {
                console.log("更新电池电量报警值成功！")

                //再更新电池温度报警值
                if (this.batteryTempAlarmValueConfigObj) {
                  this.batteryTempAlarmValueConfigObj.configValue = this.batteryAlarmSettingForm.batteryTempAlarmValue;
                  updateConfig(this.batteryTempAlarmValueConfigObj).then(res => {
                    if (res.code === 200) {
                      console.log("更新电池温度报警值成功！")
                      this.$modal.msgSuccess("更新成功！")

                      this.getAllBatteryAlarmValue();
                    } else {
                      // this.$modal.msgError("更新失败！")
                      console.log("更新电池温度报警值失败！")
                      this.$modal.msgError("更新失败！")
                    }
                  }).catch(err => {
                    console.log("更新电池温度报警值失败！")
                    this.$modal.msgError("更新失败！")
                  })
                }
              } else {
                // this.$modal.msgError("更新失败！")
                console.log("更新电池电量报警值失败！")
                this.$modal.msgError("更新失败！")
              }
            }).catch(err => {
              console.log("更新电池电量报警值失败！")
              this.$modal.msgError("更新失败！")
            })
          }
        }
      })
    },

  }
}
</script>

<style scoped>
>>> .el-input--small {
  display: inline-block;
  width: 80px;
}

.elFormItemClass {
  color: white;
}

.testClass {
  color: white;
}

</style>
